<template>
    <div class="summary-container">
        <el-card class="box-card" shadow="never">
            <div class="info">
                <div class="left">
                    <el-avatar :size="45" shape="square" :src="data.photo">
                        <el-icon size="25">
                            <UserFilled />
                        </el-icon>
                    </el-avatar>
                </div>
                <div class="right">
                    <div class="base">
                        <span>姓名：{{ data.name }}</span>
                        <span>性别：{{ data.sex }}</span>
                        <span>电话号码：{{ data.tel }}</span>
                        <div class="operate" @click="updateHandle">
                            <el-icon :size="18">
                                <Edit />
                            </el-icon>
                            <div>修改资料</div>
                        </div>
                    </div>
                    <p>注册时间：{{ data.createTime }}</p>
                </div>
            </div>
            <el-divider />
            <el-row :gutter="16">
                <el-col :span="6">
                    <div class="statistic-card">
                        <el-statistic :value="data.amount" suffix="元">
                            <template #title>
                                <div class="title">累计消费金额</div>
                            </template>
                        </el-statistic>
                    </div>
                </el-col>
                <el-col :span="5">
                    <div class="statistic-card">
                        <el-statistic :value="data.count" suffix="笔">
                            <template #title>
                                <div class="title">有效订单数量</div>
                            </template>
                        </el-statistic>
                    </div>
                </el-col>
                <el-col :span="5">
                    <div class="statistic-card">
                        <el-statistic :value="data.number" suffix="个">
                            <template #title>
                                <div class="title">体检套餐数量</div>
                            </template>
                        </el-statistic>
                    </div>
                </el-col>
            </el-row>
        </el-card>
    </div>

    <el-dialog title="修改资料" :close-on-click-modal="false" v-model="dialog.visible" width="420px">
        <el-form :model="dialog.dataForm" ref="dialogForm" :rules="dialog.dataRule" label-width="60px">
            <el-form-item label="姓名" prop="name">
                <el-input v-model="dialog.dataForm.name" placeholder="输入姓名" maxlength="10" size="medium" class="input"
                    clearable />
            </el-form-item>
            <el-form-item label="性别" prop="sex">
                <el-select v-model="dialog.dataForm.sex" placeholder="选择性别" size="medium" clearable="clearable">
                    <el-option label="男" value="男" />
                    <el-option label="女" value="女" />
                </el-select>
            </el-form-item>
            <el-form-item label="电话" prop="tel">
                <el-input v-model="dialog.dataForm.tel" placeholder="输入电话" maxlength="11" size="medium" class="input"
                    clearable />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button size="medium" @click="dialog.visible = false">
                    取消
                </el-button>
                <el-button type="primary" size="medium" @click="dataFormSubmit">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>


</template>

<script lang="ts" setup>
import { reactive, ref, Ref, getCurrentInstance } from 'vue';
import router from '../../router/index';
const { proxy } = getCurrentInstance() as any;

const data = reactive({
    name: null,
    sex: null,
    tel: null,
    photo: null,
    createTime: null,
    count: 0,
    number: 0,
    amount: 0
});

const dialog = reactive({
    visible: false,
    dataForm: {
        name: null,
        tel: null,
        sex: null
    },
    dataRule: {
        name: [{ pattern: '^[\u4e00-\u9fa5]{2,10}$', message: '姓名内容错误' }],
        tel: [
            { required: true, message: '电脑号码不能为空' },
            {
                pattern: '^1[1-9]\\d{9}$',
                message: '电话格式错误'
            }
        ]
    }
});


//加载用户摘要信息
function loadData() {
    proxy.$http('/front/customer/searchSummary', 'GET', null, true, function (resp: any) {
        let result = resp.result;
        data.name = result.name == null ? '未填写' : result.name;
        data.sex = result.sex == null ? '未填写' : result.sex;
        data.tel = result.tel;
        data.photo = result.photo;
        data.createTime = result.createTime;
        data.count = result.count;
        data.number = result.number;
        data.amount = result.amount;
    });
}

loadData();

function updateHandle() {
    dialog.visible = true;
    proxy.$nextTick(() => {
        proxy.$refs['dialogForm'].resetFields();
        dialog.dataForm.name = (data.name == '未填写' ? null : data.name);
        dialog.dataForm.sex = (data.sex == '未填写' ? null : data.sex);
        dialog.dataForm.tel = data.tel;
    });
}


function dataFormSubmit() {
    proxy.$refs['dialogForm'].validate((valid: any) => {
        if (valid) {
            proxy.$http('/front/customer/update', 'POST', dialog.dataForm, true, function (resp: any) {
                if (resp.result) {
                    proxy.$message({
                        message: '个人资料更新成功',
                        type: 'success',
                        duration: 1200,
                        onClose: () => {
                            dialog.visible = false;
                            loadData();
                        }
                    });
                }
            });
        }
    });
}


</script>

<style lang="less" scoped>
@import url(mine.less);
</style>
